<template>
	<div class="video-wrap" ref="videoWrap" @fullscreenchange="fullscreenchange">
		<div class="rtsp" v-if="url.includes('rtsp://') && ws">
			<canvas style="width: 100%; height: 100%" ref="video" v-show="isSHowVideo"> </canvas>
			<!-- loading -->
			<div class="loading" v-show="!isSHowVideo">
				<!-- {{ loadingText }} -->
			</div>
			<div class="tools animate__animated animate__fadeInUp">
				<!-- 暂停 -->
				<div class="inner">
					<div class="toggle-play" @click="togglePlay">
						<img
							:src="isPlay ? requireImg('video/暂停.png') : requireImg('video/播放.png')"
							class="toggle-play-img"
							alt=""
						/>
					</div>
					<div class="right-tools">
						<div class="volume">
							<img
								:src="volume > 0 ? requireImg('video/扬声器.png') : requireImg('video/静音.png')"
								class="volume-img"
								@click="toggleVolume"
								alt=""
							/>
							<div class="slider">
								<el-slider v-model="volume" vertical class="volume-slider"></el-slider>
							</div>
						</div>
						<div class="full-screen" @click="toggleScreen">
							<img
								:src="isFull ? requireImg('video/小屏.png') : requireImg('video/全屏.png')"
								class="full-screen-img"
								alt=""
							/>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="flv" v-else>
			<video :id="id" ref="video" width="100%" height="100%" controls autoplay loop muted style="object-fit: cover" />
		</div>
	</div>
</template>
<script lang="ts" setup>
	import { requireImg } from '@/utils/common'
	import { onMounted, ref, watch } from 'vue'
	import { pxToRem } from '@/utils/common'
	import flvjs from 'flv.js'
	interface Props {
		width?: number | string
		height?: number | string
		url?: string
		id?: string
		ws?: string
	}
	const props = withDefaults(defineProps<Props>(), {
		width: '100%',
		height: 300,
		// url: 'path/name.flv',
		// url: 'rtsp://xxxx',
		url: '',
		// ws: 'ws://10.0.26.16:8570',
		ws: '',
		id: 'video',
	})
	//init
	let player: any = null
	const video = ref()
	const videoWrap = ref()
	const isSHowVideo = ref(false)
	onMounted(() => {
		videoWrap.value.style.width = pxToRem(props.width as number)
		videoWrap.value.style.height = pxToRem(props.height as number)
		initVideo()
	})
	const fullscreenchange = () => {
		if (!document.fullscreenElement) {
			isFull.value = false
		}
	}
	const loadingText = ref('加载中...')
	//init
	const initVideo = () => {
		if (props.url.includes('rtsp://') && props.ws) {
			player = playRtsp(video.value, playerHandler)
		} else {
			playFlv()
		}
	}
	//JSMpeg
	const playerHandler = (e: any) => {
		console.log('player', player)
		console.dir('canvas', video.value)
		isPlay.value = true
		//防止首屏白屏
		setTimeout(() => {
			isSHowVideo.value = true
		}, 1000)
	}
	const playRtsp = (canvas: HTMLElement, playHandler: any) => {
		let player = new JSMpeg.Player(props.ws + '/rtsp?url=' + btoa(props.url), {
			canvas: canvas,
			autoplay: true,
			loop: true,
			onPlay: playHandler,
		})
		return player
	}

	//flv
	let flvPlayer: any = null
	const playFlv = () => {
		if (flvjs.isSupported()) {
			flvPlayer = flvjs.createPlayer({
				type: 'flv',
				isLive: true,
				url: props.url,
			})
			flvPlayer.attachMediaElement(video.value)
			flvPlayer.load()
			flvPlayer.play()
		}
	}

	//tools
	//toggle play
	const isPlay = ref(false)
	const togglePlay = () => {
		isPlay.value = !isPlay.value
		isPlay.value ? player.play() : player.stop()
	}
	//toggle full screen
	const isFull = ref(false)
	const toggleScreen = () => {
		isFull.value = !isFull.value
		if (isFull.value) {
			videoWrap.value.requestFullscreen()
		} else {
			document.exitFullscreen()
		}
	}
	//toggle volume
	const volume = ref<number>(0)
	const toggleVolume = () => {
		volume.value == 0 ? (volume.value = 100) : (volume.value = 0)
	}
	watch(volume, (val: number) => {
		console.log('player.volume', player.volume)

		player.volume = val / 100
	})
</script>

<style lang="scss" scoped>
	.video-wrap {
		position: relative;
		// background-color: yellowgreen;
		&:hover .tools {
			display: block;
		}
		overflow: hidden;
	}
	.tools {
		position: absolute;
		display: none;
		width: 100%;
		box-sizing: border-box;
		bottom: 0;
		padding: 0 15px;
		height: 30px;
		background-image: linear-gradient(to bottom, transparent 0%, transparent 30%, #000000b4 100%);
		.inner {
			align-items: center;
			display: flex;
			justify-content: space-between;
			.right-tools {
				display: flex;
				.volume,
				.full-screen {
					margin: 0 3px;
				}
				.volume {
					&:hover .slider {
						display: block;
					}
					.slider {
						position: absolute;
						width: 25px;
						border-radius: 10px;
						height: 70px;
						transform: translateY(-100%) translateX(-50%);
						top: 0;
						left: 50%;
						background-color: #000000b4;
						display: none;

						&:hover {
							display: block;
						}
						.volume-slider {
							position: absolute;
							top: 0;
							left: 0;
							width: 100%;
							.el-slider__runway {
								margin: 0;
							}
						}
					}
				}
			}
			img {
				position: absolute;
				top: 0;
			}
			.toggle-play,
			.volume,
			.full-screen {
				position: relative;
				width: 25px;
				height: 25px;
				cursor: pointer;
			}
			.toggle-play img,
			.volume-img {
				width: 100%;
				height: 100%;
			}
			.full-screen img {
				width: 100%;
				height: 100%;
			}
			#video {
				vertical-align: middle;
			}
		}
	}
	.loading {
		position: absolute;
		display: flex;
		top: 0;
		left: 0;
		z-index: 99999;
		width: 100%;
		height: 100%;
		background-color: #000;
		font-size: 20px;
		justify-content: center;
		align-items: center;
		background-image: url('../../assets/images/video/loading.jpg');
		background-size: 100% 100%;
	}
	.flv {
		width: 100%;
		height: 100%;
	}
	.rtsp {
		width: 100%;
		height: 100%;
	}
</style>
